<template>
	<view v-if='userCoupon != ""' style='background-color: antiquewhite;height: 100vh;overflow: auto;'>
		<view :style="backgroundStyle">
			<view class='tree' v-if='userCoupon.coupon.__metadata'>
				<view style='padding:10px 30% 0px 30%'>
					
					<img :src='userCoupon.coupon.__metadata.image ? userCoupon.coupon.__metadata.image : "/static/lettle-tree.png"' style='width:100%;height:auto'
						mode='widthFix' />
				</view>
				
			</view>

			<view v-if='solarMessage' style='position: absolute;top: 15vh;right:10px;z-index:9999'>
				<view v-for='item in solarMessage.buttons'>
					<view class='solar-button' @click='showSloarMessage(item)'>{{item.name}}</view>
				</view>
			</view>
		</view>

		<view v-if='image' class='show-image'>
			<img :src='image' style='width:100%' mode='widthFix' />
		</view>
		<view v-else style='width:80%;height:80vh;position: fixed;top:10%'>
			<img :src='icon' style='width:100%;height:80vh' mode='widthFix' />
		</view>
		<view style='position: fixed;bottom:33.5vh;width:100%;z-index:999'>
			<view style='color:#fff;font-size:18px;text-align: center;font-weight: bold;'>
				{{userCoupon.code ? userCoupon.code.replace('甘链-','') : ''}}
			</view>
		</view>
		<view style='position: fixed;bottom:23vh;width:40%;left:30%;height:15vh'>
			<img src='https://picture.jmgc.vip/162f62ae-1e37-4f3d-a843-24cdef36c429.png' style='width:100%;height:auto' mode='widthFix' />
		</view>
		<view>
			<u-row>
				<u-col v-for='(item,index) in images1' span='4'>
					<view style='padding:10px;'>
						<u-button :text='item.name' size='small' type='success' shape='circle' :plain='true'
							@click='showImage1(index)'></u-button>
					</view>
				</u-col>
			</u-row>
		</view>
		<view>
			<u-row>
				<u-col v-for='(item,index) in images2' span='4'>
					<view style='padding:10px;'>
						<u-button :text='item.name' size='small' type='success' shape='circle' :plain='true'
							@click='showImage2(index)'></u-button>
					</view>
				</u-col>
			</u-row>
		</view>
		<u-popup v-if='chooseImage != ""' :show="show" @close="show = false" mode='bottom'>
			<view>
				<view style='text-align: center;color:#909399;margin:10px 0px;'>请选择需要的产品</view>
				<view>
					<view @click='chooseChildren' style='padding:0px 30%;margin:auto'>
						<img :src='chooseImage.children[0].image' style='width:100%;height:auto;' mode='widthFix' />
						<view style='text-align: center;color:#909399'>{{chooseImage.children[0].name}}</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="showMessage" @close="showMessage = false" mode='bottom'>
			<view style='padding:10px;'>
				<view style='text-align: center;color:#909399;margin:10px 0px;'>
					您可以填写您的寄语，填写后，我们会把您的寄语挂到您认养的树上，您可以随时跟那个她过来看独属于你们的寄语</view>
				<view>
					<u--textarea v-model="message" placeholder="请输入内容" :disabled='disabledMessage'></u--textarea>
				</view>
				<view style='padding:10px;'>
					<u-button type='success' shape='circle' text='确定' @click='saveMessage'></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				images1: [
					{
						name: '浇水',
						image: 'https://picture.jmgc.vip/f89a337b-39a7-42f7-9a1d-dede304f5c4e.gif'
					},
					{
						name: '除草',
						image: 'https://picture.jmgc.vip/8762e9ab-37d1-4fe9-bd83-d710734b3d4e.gif'
					},
					{
						name: '护土',
						image: 'https://picture.jmgc.vip/f54c94e6-5477-42ca-ae2c-61443c69ba6e.gif'
					}
				],
				images2: [
					{
						name: '营养',
						image: 'https://picture.jmgc.vip/849f1aa2-5ccd-44ec-a874-b0262664c766.gif',
						children: [{
							name: '鱼多肽',
							image: 'https://picture.jmgc.vip/f5a5e902-d86c-41d5-b7eb-aba2d3a4e3c6.png'
						}]
					},
					{
						name: '杀虫',
						image: 'https://picture.jmgc.vip/6b82e997-a6dd-41db-85ad-00ada6a60240.gif',
						children: [{
							name: '陈皮纯露',
							image: 'https://picture.jmgc.vip/acfaf8bf-3895-49e7-b74f-1a84b0e2af65.png'
						}]
					},
					{
						name: '杀菌',
						image: 'https://picture.jmgc.vip/98aa378b-c63d-4e08-97c5-bea54f2e2c29.gif',
						children: [{
							name: '乳酸铜',
							image: 'https://picture.jmgc.vip/902d4e46-f44a-45d2-97f9-1d79dece9515.png'
						}]
					}
				],
				image: '',
				chooseImage: '',
				show: false,
				showMessage: false,
				message: '',
				tree: {
					message: ''
				},
				userCoupon: '',
				solarMessage: '',
				backgroundStyle: 'width: 100%;height: 80vh;background-size: cover;background-position: center;background-repeat: no-repeat;',
				disabledMessage: false,
				messageId: 0,
				icon: ''
			}
		},
		onLoad(options) {
			if (typeof(options.id) != 'undefined') {
				this.request.get(`public/user-coupons/${options.id}`,
				{
					'@expands': `['entity.coupon']`
				},
				).then((res) => {
					if (res.data) {
						console.log(123,res.data)
						this.userCoupon = res.data
						// 获取特定产品的extraData，用来获取背景图，树图以及2个按钮的内容
						this.request.get(`public/products`, {
							'@filter': `entity.getCategory().getType().getSlug() == 'tree'`
						}).then((res) => {
							this.product = res.data[0]
							// 加载背景图
							this.backgroundStyle +=
								`background-image: url("${this.product.extraData.backgroundImage ? this.product.extraData.backgroundImage : ''}")`
								this.icon = this.product.extraData.icon ? this.product.extraData.icon : ''
							this.solarMessage = this.product.extraData.solarMessage ? this.product
								.extraData.solarMessage : ''
						})
					} else {
						uni.showModal({
							title: '',
							content: '参数错误，请重试！',
							showCancel: false,
							success: () => {
								uni.switchTab({
									url: '/pages/index/index'
								})
							}
						})
					}
				})
			} else {
				uni.showModal({
					title: '',
					content: '参数错误，请重试！',
					showCancel: false,
					success: () => {
						uni.switchTab({
							url: '/pages/index/index'
						})
					}
				})
			}
		},
		onShow() {

		},
		methods: {
			showImage1(index) {
				if (this.image == '') {
					this.image = this.images1[index].image
					setTimeout(() => {
						this.image = ''
					}, 3000);
				} else {
					uni.showToast({
						title: '操作过于频繁',
						icon: 'none'
					})
				}
			},
			chooseChildren() {
				if (this.image == '') {
					this.show = false
					this.image = this.chooseImage.image
					setTimeout(() => {
						this.image = ''
					}, 3000);
				} else {
					uni.showToast({
						title: '操作过于频繁',
						icon: 'none'
					})
				}
			},
			showImage2(index) {
				if (this.image == '') {
					if (this.images2[index].children) {
						this.chooseImage = this.images2[index]
						this.show = true
					}
				} else {
					uni.showToast({
						title: '操作过于频繁',
						icon: 'none'
					})
				}
			},
			toTrees() {
				uni.switchTab({
					url: '/pages/cart/index'
				})
			},
			showSloarMessage(item) {
				console.log(item)
				uni.showModal({
					title: `${item.name}`,
					content: `${item.message}`,
					showCancel: false
				})
			}
		}
	}
</script>

<style>
	.tree {
		position: fixed;
		bottom: 38vh;
		width: 60%;
		left: 20%;
		z-index: 998;
	}

	.show-image {
		position: fixed;
		bottom: 40vh;
		z-index: 999;
		width: 60%;
		/* left: -12%; */
	}

	.solar-button {
		background-color: bisque;
		color: #909399;
		border-radius: 10px;
		padding: 3px 10px;
		margin-top: 10rpx;
	}
</style>